<template>
  <Layout class="layout-100">
    <Header class="header-cont">人员选择</Header>
    <Content class="content-cont">
      <Row style="margin-bottom:20px;">
        <Col span="8">
        <Select v-model="searchParams.postId" style="width:70%;" placeholder="职务">
          <OptionGroup label="通用">
            <Option v-for="item in postList.generalPostList" :value="item.id" :key="item.id">{{ item.name }}</Option>
          </OptionGroup>
          <OptionGroup label="专业">
            <Option v-for="item in postList.proprietaryPostList" :value="item.id" :key="item.id">{{ item.name }}</Option>
          </OptionGroup>
        </Select>
        </Col>
        <Col span="8">
            <Input v-model="searchParams.name" placeholder="姓名" style="width: 70%;"/>
        </Col>
        <Col span="8"  style="text-align: right">
        <Button type="primary" style="margin-right: 15px" @click="getProPersonList(treeActive)">搜索</Button>
        <Button type="warning" style="margin-right: 15px" @click="resetParam">重置</Button>
        </Col>
      </Row>
      <Layout class="layout-100">
        <Sider width="300" class="tree-box">
          <Tree :data="tree" @on-select-change="checkTree" class="tree">
          </Tree>
        </Sider>
        <Content class="table-box">
          <Table border :columns="columns" :data="personList" class="scroll-bar">
            <template slot-scope="{ row, index }" slot="action">
              <span title="详情" class="button-class" @click="detailBtn('details', row, '人员详情')" type="text">详情</span>
            </template>
          </Table>
          <Row type="flex" justify="center">
            <Col>
              <Page
                class="pagination"
                :total="page.total"
                :current="page.current"
                :page-size="page.pageSize"
                :page-size-opts="[10,20,50,100]"
                @on-change="pageChange"
                @on-page-size-change="sizeChange"
                show-elevator
                show-total
                show-sizer
              />
            </Col>
          </Row>
        </Content>
      </Layout>
    </Content>
    <Footer class="footer-cont">
      <Button @click="closetab(0)">取消</Button>
    </Footer>
  </Layout>

</template>
<script>
  import { mapMutations } from 'vuex'
  export default {
    name: 'CheckPerson',
    props:{
      detailShow:Boolean
    },
    data() {
      return {
        tree:[],
        searchParams:{},
        personList:[],
        treeActive:[],
        postList:[],//职务
        list:[],
        userDetail: JSON.parse(localStorage.getItem('userList')),
        page: {
          total: 0,
          current: 1,
          pageSize: 10,
          totalPage: 0,
        },
        columns: [
          {
            title: '序号',
            align: 'center',
            width: 70,
            render: (h, params) => {
              return h('span', params.index + (this.page.current - 1) * this.page.pageSize + 1)
            }
          },{
            title: '姓名',
            key: 'name',
            align: 'center',
            render:(h, params)=>{
              return h('span', {
                props: {
                  type: 'text',
                  title:params.row.name,
                  class:'button-class'
                },
                style:{
                  color: '#0099ff',
                  padding: '0 5px',
                  cursor: 'pointer'
                },
                on: {
                  click: () => {
                    this.closetab(params.row)
                  }
                }
              },params.row.name )
            }
          }, {
            title: '联系电话',
            key: 'tel',
            align: 'center',
          }, {
            title: '职务',
            align: 'center',
            key: 'postName',
          },
          {
            title: '操作',
            align: 'center',
            slot: 'action'
          }],
        page: {
          total: 0,
          current: 1,
          pageSize: 10,
          totalPage: 0,
        },
      }
    },
    methods: {
      setData(){
        if(this.columns.length == 5){
          this.columns.pop()
        }

      },
      //跳转详情
      SaveBtn(id){
        let person = {
          id:id,
          joinType:this.joinType
        }
        localStorage.setItem('joinUser', JSON.stringify(person));
        this.closeTag({
          name: this.$route.name,
          params: this.$route.params,
          query: this.$route.query,
        });
      },
      detailBtn(type,data){
        let id = data.personUserOrgId;
        let url = {
          params: { type: 'details', id: data.personUserOrgId, name: '人员详情' }
        }
        if(data.projectTeamName){
          url.name = 'project-person-detail';
          this.$router.push(url)
        }else{
          url.name = 'enterprise-person-detail';
          this.$router.push(url)
        }
      },
      //获取树
      getTree () {
        this.$api.measurePlan.getTree().then((res) => {
          if(res.code == 200){
            this.tree = res.data;
          } else {
            this.$Message.error(res.data.msg);
          }
        })
      },
      checkTree(data){
        this.page.current = 1;
        this.page.pageSize = 10;
        this.getProPersonList(data);
      },
      getProPersonList(data) {
        if(data.length>0){
          this.treeActive = data;
          let params = {
            currentPage: this.page.current,
            pageSize: this.page.pageSize,
            whereMap: {}
          }
          params.whereMap.searchType = 2;
          params.whereMap = this.searchParams;
          if(data[0].type == 1 || data[0].type == 5){
            params.whereMap.enterpriseId = data[0].objectId;
          }else if(data[0].type == 2){
            params.whereMap.projectTeamId = data[0].objectId;
          }else if(data[0].type == 3){
            params.whereMap.workPointId = data[0].objectId;
          }
          else if(data[0].type == 4 || data[0].type == 6 || data[0].type == 7 || data[0].type == 8){
            params.whereMap.deptId = data[0].objectId;
          }
          if(data[0].type == 1 ||data[0].type == 4 || data[0].type == 5 || data[0].type == 8){
            params.whereMap.searchType = 1;
          }else{
            params.whereMap.searchType = 2;
          }
          params.whereMap.isQueryUser = true;
          if(params.whereMap.searchType){
            this.$api.ProjectPerson.getProPersonList(params).then(res => {
              if (res.code === 200) {
                this.personList = res.data.resultObject
                this.page.total = res.data.totalRecord
                this.page.totalPage = res.data.totalPages
              } else {
                this.$Message.error(res.data.data)
              }
            })
          }

        }
      },
      pageChange (current) {
        this.page.current = current;
        this.getProPersonList(this.treeActive)
      },
      sizeChange (size) {
        this.page.pageSize = size;
        this.getProPersonList(this.treeActive)
      },
      closetab(code,index){
        this.$emit('func', code)
      },
      resetParam(){
        this.searchParams = {};
        this.personList = [];
        this.getTree();
      },
      //获取职务
      getPostList(id) {
        let data = {
          objectId: id
        }
        this.$api.ProjectPerson.getJobList(data).then(res => {
          if (res.code === 200) {
            this.postList = res.data
          } else {
            this.$Message.error(res.message)
          }
        })
      },
    },
    mounted () {
      //1集团 2工程公司 3项目部
      if (this.userDetail.userInOrgType == 'PROJECT_TEAM_USER') {
        this.personType = 3;
        this.getPostList(this.userDetail.projectTeamId)
      }else if(this.userDetail.userInOrgType == 'ROOT_ENTERPRISE_USER'){
        this.personType = 1;
        this.getPostList(this.userDetail.enterpriseId)
      }else if(this.userDetail.userInOrgType == 'NOMAL_ENTERPRISE_USER'){
        this.personType = 2;
        this.getPostList(this.userDetail.enterpriseId)
      }
      this.getTree();
      this.personList = [];
      if(this.detailShow){//方案制定 人员选择 隐藏详情
        this.columns.splice(4,1)
      }
    }

  }
</script>
<style scoped>
  .tree-box{
    background-color: #ffffff;
    border: 1px solid #dcdee2;
  }
  .table-box{
    background-color: #ffffff;
    margin-left:20px;
    border: 1px solid #dcdee2;
  }
  .tree{
   padding: 15px;
    overflow: auto;
    height: calc(100% - 0px);
  }
  .tab-page{
    text-align: center;
    margin: 15px 0;
  }
  .checkPersonType{
    margin-bottom: 40px;
  }
</style>
